<template>
  <el-container>
    <el-header height="30%">
      <div style="border-radius: 4px;" class="page-container">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" name="activeName">
            <div style="height:30%;width:90%">
              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货单号：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <span>SH1910310002188083</span>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货状态：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <span>已入库</span>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>供应商名称：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <span>A供应商</span>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>商家名称：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" disabled="disabled" value="张小二服饰"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right;">
                    <label>店铺名称：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" readonly="readonly" value="选择店铺名称" @focus="showStore"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div
                    class="grid-content"
                  
                    style="text-align:right"
                   
                  >
                    <label>收货仓库：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini"   readonly="readonly"  @focus="showWarehouse" value="选择仓库"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货联系人：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" disabled="disabled"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right;">
                    <label>发货日期：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" type="data" disabled="disabled" value="2010-10-31"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>交易币别：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" disabled="disabled" value="CNY"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货方式：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;">
                    <el-select size="mini" disabled="disabled" value="接受-入库" style="width:200px"></el-select>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right;">
                    <label>收货日期：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" type="data" disabled="disabled" value="2010-10-31"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>发货地址：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" type="textarea" disabled="disabled" style="width:200px"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货地址：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" type="textarea" disabled="disabled" style="width:200px"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>备注：</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" type="textarea" disabled="disabled" style="width:200px"></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-header>
    <el-main>
      <div>
        <el-tabs>
          <el-tab-pane label="收货单明细">
            <div>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="mpCode" label="商品编码" width="180"></el-table-column>
                <el-table-column prop="mpName" label="商品名称" width="180"></el-table-column>
                <el-table-column prop="mpBarcode" label="商品规格" width="180"></el-table-column>
                <el-table-column prop="mpMeasuret" label="商品条码" width="180"></el-table-column>
                <el-table-column prop="shoptype" label="商品类目" width="180"></el-table-column>
                <el-table-column prop="shopBrand" label="商品品牌" width="180"></el-table-column>
                <el-table-column prop="mpMeasureUnit" label="采购单位" width="180"></el-table-column>
                <el-table-column prop="purchasenums" label="* 采购收货数量	" width="180"></el-table-column>
                <el-table-column prop="regularnums" label="合格品数量" width="180"></el-table-column>
                <el-table-column prop="unregularnums" label="不合格品数量" width="180"></el-table-column>
                <el-table-column prop="correctedquantity" label="更正后数量" width="180"></el-table-column>
                <el-table-column prop="returnpurchase" label="退货采购数量" width="180"></el-table-column>
                <el-table-column prop="untaxed" label="未税采购价" width="180"></el-table-column>
                <el-table-column prop="taxrate" label="税率(%)	" width="180"></el-table-column>
                <el-table-column prop="moneytype" label="交易币别" width="180"></el-table-column>
                <el-table-column prop="exchangerate" label="汇率" width="180"></el-table-column>
                <el-table-column prop="purchaseprice" label="含税采购价" width="180"></el-table-column>
                <el-table-column prop="untaxedamount" label="未税金额" width="180"></el-table-column>
                <el-table-column prop="tax" label="税额" width="180"></el-table-column>
                <el-table-column prop="amounttax" label="含税金额" width="180"></el-table-column>
                <el-table-column prop="receiptmethod" label="收货方式" width="180"></el-table-column>
                <el-table-column prop="remark" label="备注" width="180"></el-table-column>
                <el-table-column prop="warehousepurchase" label="入库采购数量" width="180"></el-table-column>
                <el-table-column prop="purchaseno" label="采购单号" width="180"></el-table-column>
                <el-table-column prop="purchasealone" label="采购单行" width="180"></el-table-column>
                <el-table-column prop="asnno" label="ASN单号" width="180"></el-table-column>
                <el-table-column prop="asnline" label="ASN行号" width="180"></el-table-column>
                <el-table-column prop="contractnumber" label="合同编码" width="180"></el-table-column>
                <el-table-column prop="contracttype" label="合同类型" width="180"></el-table-column>
                <el-table-column prop="attributes" label="合同属性" width="180"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="操作日志">
            <div>
              <el-table :data="tableLog" border style="width: 100%">
                <el-table-column prop="operatingid" label="操作用户ID"></el-table-column>
                <el-table-column prop="operator" label="操作人"></el-table-column>
                <el-table-column prop="operating_time" label="操作时间"></el-table-column>
                <el-table-column prop="operating" label="操作"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
    <el-row style="text-align:center">
      <kt-button label="打印" type="primary" @click="print" />
    </el-row>

   <!-- 选择店铺 -->
    <el-dialog
      title="选择店铺"
      :visible.sync="showModel"
      width="45%"
      height="100%"
      label-width="80px"
      label-position="right"
    >
      <el-form style="text-align:left" label-width="80px" label-position="right">
        <el-row>
          <div style="text-align:center">
            <el-form-item label="店铺名称" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>

            <el-form-item label="店铺编码" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>
          </div>
        </el-row>

        <div style="text-align:center">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
            <kt-button label="重置" type="primary" />
          </el-form-item>
        </div>

        <el-table :data="shopTable" border style="width: 100%" :visible.sync="showTable">
          <el-table-column prop="checks" type="selection"></el-table-column>
          <el-table-column prop="name" label="商家名称" width="280"></el-table-column>
          <el-table-column prop="number" label="店铺编码" width="280"></el-table-column>
          <el-table-column prop="shopname" label="店铺名称"></el-table-column>
          <el-table-column prop="type" label="店铺类型"></el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="cancels">取 消</el-button>
      </div>
    </el-dialog>

   <!-- 选择仓库 -->


    <el-dialog
      title="选择仓库"
      :visible.sync="showModel1"
      width="45%"
      height="100%"
      label-width="80px"
      label-position="right"
    >
      <el-form style="text-align:left" label-width="80px" label-position="right">
        <el-row>
          <div style="text-align:center">
            <el-form-item label="仓库编码" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>

            <el-form-item label="仓库名称" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>
          </div>
        </el-row>

        <div style="text-align:center">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
            <kt-button label="重置" type="primary" />
          </el-form-item>
        </div>

        <el-table :data="shopWarehouse" border style="width: 100%" :visible.sync="showTable">
          <el-table-column prop="checks" type="selection"></el-table-column>
          <el-table-column prop="number" label="仓库编码" width="280"></el-table-column>
          <el-table-column prop="name" label="仓库名称" width="280"></el-table-column>
          <el-table-column prop="address" label="仓库地址"></el-table-column>
        
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="cancels1">取 消</el-button>
      </div>
    </el-dialog>

  </el-container>
</template>
<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
export default {
  components: {
    CyTable,
    KtButton
  },
  data() {
    return {
      showModel: false,
      showTable: false,
      showModel1: false,
      showTable1: false,
      activeName: "activeName",
      tableLog: [
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 22:55:56	",
          operating: "收货单入库	",
          remark: ""
        },
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 22:00:02		",
          operating: "确认收货单",
          remark: ""
        },
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 21:59:57		",
          operating: "更新收货单		",
          remark: ""
        },
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 21:59:52	",
          operating: "创建收货单		",
          remark: ""
        }
      ],
      tableData: [
        {
          mpCode: "1910300000521981",
          mpName: "育学园补邮费专用链接1元（请联系客服后下单，勿自主拍下！）",
          mpBarcode: "",
          mpMeasureUnit: "",
          shoptype: "包包",
          shopBrand: "",
          mpMeasureUnit: "件",
          purchasenums: "1,000.0000",
          regularnums: "1,000.0000",
          unregularnums: "0.0000",
          correctedquantity: "",
          returnpurchase: "",
          untaxed: "0.909091",
          taxrate: "10.000000%",
          moneytype: "CNY",
          exchangerate: "1",
          purchaseprice: "1.000000	",
          untaxedamount: "909.091000",
          tax: "90.910000",
          amounttax: "1,000.000000",
          receiptmethod: "接受-入库",
          remark: "",
          warehousepurchase: "1,000.000000",
          purchaseno: "CG1910310002187947",
          purchasealone: "1910310002187969",
          asnno: "",
          asnline: "",
          contractnumber: "HT1909220000100067",
          contracttype: "代销合同	",
          attributes: "自采合同"
        }
      ],

      shopTable: [
        {
          checks: "",
          name: "张小二服饰",
          number: "jd_001	",
          shopname: "京东店	",
          type: "线上店铺"
        }
      ],

       shopWarehouse: [
        {
          checks: "",
          number: "1702",
          name: "张小二门店仓	",
          address: "	",
         
        }
      ],


    };
  },
  methods: {
    print: function() {
      this.$message({ message: "打印成功", type: "success" });
    },
    //店铺table
    showStore() {
      this.showModel = true;
      this.showTable = true;
    },
    showWarehouse() {
      this.showModel1 = true;
      this.showTable1 = true;
    },
    //取消按钮
    cancels: function() {
      this.showModel = false;
      this.showTable = false;
    },
      //取消按钮
    cancels1: function() {
      this.showModel1 = false;
      this.showTable1 = false;
    }
  
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>